<template>
  <!-- 顶部标题栏+返回 -->
  <view class="relative bg-[#165DFF] text-white text-center text-[36rpx] font-bold py-[32rpx]">
    <view class="absolute left-[32rpx] top-[32rpx] text-[32rpx]" @click="goBack">
      ←
    </view>
    课程详情
  </view>
  <!-- 课程信息卡片 -->
  <view class="bg-white rounded-2xl shadow-md p-[32rpx] mx-[24rpx] mt-[32rpx] mb-[24rpx]">
    <view class="course-title text-[32rpx] font-bold mb-[16rpx] text-[#165DFF]">{{ course.title }}</view>
    <view class="flex mb-[24rpx] gap-x-8">
      <view class="flex-1 text-[#666] text-[26rpx]">时长: {{ course.duration }}</view>
      <view class="flex-1 text-[#666] text-[26rpx]">价格: ¥{{ course.price }}</view>
      <view class="flex-1 text-[#666] text-[26rpx]">学员: {{ course.students }}人</view>
    </view>
    <view class="course-content text-[28rpx] leading-[1.6] text-[#333]">{{ course.content }}</view>
  </view>
  <!-- 分区标题 -->
  <view class="px-[32rpx] py-[24rpx] text-[30rpx] font-bold border-b border-[#eee] bg-[#f9f9f9]">购买记录</view>
  <!-- 购买记录列表 -->
  <view class="bg-white mx-[24rpx] rounded-2xl shadow-md mt-0">
    <template v-if="purchaseList.length">
      <view
        v-for="item in purchaseList"
        :key="item.id"
        class="border-b border-[#eee] last:border-0 p-[32rpx]"
      >
        <view class="flex justify-between mb-[12rpx]">
          <view class="text-[#666] text-[26rpx]">{{ item.time }}</view>
          <view
            class="text-[26rpx] px-[16rpx] py-[4rpx] rounded-lg"
            :class="[
              item.status === 'paid' ? 'bg-[#e8f5e9] text-[#2e7d32]' :
              item.status === 'pending' ? 'bg-[#fff8e1] text-[#FF4D4F]' :
              'bg-[#ffebee] text-[#c62828]'
            ]"
          >
            {{ statusText(item.status) }}
          </view>
        </view>
        <view class="flex justify-between text-[28rpx]">
          <view>用户: {{ item.user }}</view>
          <view class="font-bold text-[#165DFF]">¥{{ item.amount }}</view>
        </view>
      </view>
    </template>
    <view v-else class="text-center py-[80rpx] text-[#999] text-[28rpx]">暂无购买记录</view>
  </view>
</template>

<script setup lang="ts">
import Taro from '@tarojs/taro'
import { ref } from 'vue'

/**
 * 课程购买记录页面
 * @description 课程信息+购买记录列表，严格按设计稿和Cursor规则实现。
 * @performance 只渲染必要内容，mock数据，移动端适配。
 */

const goBack = () => {
  Taro.navigateBack()
}

const course = ref({
  title: 'HTML5与CSS3基础教程',
  duration: '20小时',
  price: '99.00',
  students: 128,
  content:
    '本课程从零开始讲解HTML5和CSS3的基础知识，包括HTML5新标签、语义化结构、CSS3选择器、盒模型、Flex布局、响应式设计等核心内容。通过大量实例演示，帮助学员快速掌握现代网页开发基础技术。'
})

const purchaseList = ref([
  { id: 1, time: '2023-05-15 14:30', status: 'paid', user: '张**', amount: '99.00' },
  { id: 2, time: '2023-05-10 09:15', status: 'refund', user: '李**', amount: '99.00' },
  { id: 3, time: '2023-05-08 16:45', status: 'paid', user: '王**', amount: '99.00' },
  { id: 4, time: '2023-05-05 11:20', status: 'pending', user: '赵**', amount: '99.00' }
])

function statusText(status: string) {
  if (status === 'paid') return '已入账'
  if (status === 'pending') return '未入账'
  return '有退款'
}
</script>

<style scoped lang="scss">

</style>